<template>
  <div class="app-container">
    <div class="nav">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item.platform_name"
          v-for="(item, index) in cardConfig.list01"
          :key="index"
          :name="item.id + ''"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 内容 -->
    <div class="content">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list || []"
        border
        fit
        sortable
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        highlight-current-row
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :default-sort="{prop:'add_time', order: 'ascending' }"
      >
        <el-table-column
          type="index"
          label="序号"
          prop="id"
          width="40"
        ></el-table-column>

        <el-table-column
          label="商户"
          min-width="30"
          align="center"
          prop="amount"
        >
          <template slot-scope="{ row }">
            <span>{{ row.business_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="小组"
          min-width="40"
          align="center"
          prop="wxip_amount"
        >
          <template slot-scope="{ row }">
            <span>{{ row.group_name }}<br />{{ row.agent_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="小组卡"
          min-width="40"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.name }}<br />{{ row.bank_name }} </span>
          </template>
        </el-table-column>

        <el-table-column
          label="IP"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="微信IP"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.pl_apply_time ? row.pl_apply_time : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="业务余额"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.gold | tofixed }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="实际卡余额"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.amt_balance | tofixed }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="差值"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ (row.amt_balance - row.gold) | tofixed }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="在线状态"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.online_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="锁定状态"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.locked == 0 ? "未锁定" : "锁定" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="锁定类型"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.label_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="处理状态"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.status_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="协查原因"
          min-width="30"
          class-name="end_times"
          align="center"
        >
          <template slot-scope>
            <span>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="加入时间"
          min-width="40"
          class-name="end_times"
          align="center"
          prop='add_time'
        >
          <template slot-scope="{ row }">
            <div>{{ row.add_time | masDateFormat }}</div>
            <div>{{ row.apply_user }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="处理信息"
          min-width="60"
          class-name="end_times"
          align="centent"
        >
          <template slot-scope="{ row }" align="left">
            <div>方式：{{ type_list01[row.deal_type] }}</div>
            <div>预计处理时间：{{ row.notice_time | masDateFormat }}</div>
            <div>备注：{{ row.note }}</div>
            <el-button size="mini" type="primary" plain @click="edit(row, 1)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="已过时间"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <span v-if="row.status != 1">{{ overdueTime(row, 0) }} 天</span>
            <span v-else> - </span>
          </template>
        </el-table-column>
        <el-table-column
          label="确定处理完成"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              plain
              @click="recordComplete(row.id, row.ret_msg)"
              >确定完成</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="处理完成时间"
          min-width="50"
          class-name="end_times"
          align="center"
        >
          <template slot-scope="{ row }">
            <div v-if="row.action_time">
              <span>{{ overdueTime(row, 1) }} 天</span>
              操作人员:{{ row.deal_user }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="editShow"
      width="450px"
      title="处理信息"
      class="dialog_edit"
    >
      <el-form
        label-width="120px"
        ref="forms"
        :model="form_data"
        :rules="rules"
      >
        <el-form-item label="处理方式">
          <!-- <el-input v-model="form_data.account"></el-input> -->
          <el-select
            clearable
            v-model="form_data.disposition"
            placeholder="处理方式"
          >
            <el-option
              :value="item.id"
              :label="item.name"
              v-for="(item, key) in type_list"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计处理时间">
          <!-- <el-input v-model="form_data.name"></el-input> -->
          <el-date-picker
            v-model="form_data.time"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="处理备注">
          <el-input v-model="form_data.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="confirm"
            type="primary"
            size="small"
            @click="confirm()"
            >提 交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex";
import {
  assistSearchList_card,
  dealAssistSearch_card,
  preDealAssistSearch_card,
  getPlatformList,
} from "@/api/table";
import Pagination from "@/components/Pagination";

export default {
  name: "ComplexTable",
  components: { Pagination },
  filters: {
    tofixed(value) {
      if (value == "-") return "-";
      if (value || value == 0 || value != "-") {
        return ((value * 1).toFixed(2) + "").replace(
          /(\d)(?=(\d{3})+\.)/g,
          "$1,"
        );
      }
    },

    filterLongTime(status = "") {
      var str = status;
      str = str.replace(/\d{2}:\d{2}:\d{2}/g, "");
      return str;
    },
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
    masDateFormat: function (msg, pattern = "") {
      if (msg == "0000-00-00 00:00:00") {
        return "-";
      }
      if (msg == null) {
        return "-";
      }
      var mt = new Date(msg);
      var y = mt.getFullYear();
      var m = (mt.getMonth() + 1).toString().padStart(2, "0");
      var d = mt.getDate();
      if (pattern == "yyyy-mm-dd") {
        return y + "-" + m + "-" + d;
      }
      return y + "-" + m + "-" + d;
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  computed: {
    ...mapState(["cardConfig"]),
  },
  data() {
    return {
      activeName: localStorage.getItem("id") || "1",
      type_list01: {
        1: "当天处理",
        2: "三天后再查",
        3: "七天后再查",
      },
      type_list: [
        { name: "当天处理", id: 1 },
        { name: "三天后再查", id: 2 },
        { name: "七天后再查", id: 3 },
      ],
      
      value7: [""],
      list: [],
      form_data: {},
      form: {},
      listLoading: false,
      editShow: false,
      tableKey: 0,
      rules: {
        name: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入管理员密码", trigger: "blur" },
        ],
        role_id: [
          { required: true, message: "请选择管理员类型", trigger: "blur" },
        ],
      },
      id_list: null,
      arr01: [
        { name: "未处理", value: 1 },
        { name: "当天处理", value: 2 },
        { name: "清账处理", value: 3 },
        { name: "平账-报亏损,", value: 4 },
        { name: "三天后再查", value: 5 },
        { name: "七天后再查", value: 6 },
      ],
    };
  },
  created() {
    this.getList_sort(); //获取分类数组
    this.assistSearchList_card();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.name)
      localStorage.setItem("id", tab.name);
      this.assistSearchList_card();
    },
    getList_sort() {
      getPlatformList().then((res) => {
        // console.log(res.data)
        this.$store.commit("getSortList_card", res.data);
      });
    },
    edit(item, type) {
      this.id_list = item.id;
      // this.form_data.time=this.get_time()[0];
      this.editShow = true;
      this.$nextTick(() => {
        this.$refs["forms"].clearValidate();
      });
      let data = JSON.parse(JSON.stringify(item));
      this.$store.commit("changeform_power", data);
    },
    get_time() {
      let mm =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let yy =
        new Date().getFullYear() < 10
          ? "0" + new Date().getFullYear()
          : new Date().getFullYear();
      let dd = new Date().getDate()
        ? "0" + new Date().getDate()
        : new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      var value =
        yy + "-" + mm + "-" + dd + " " + "00" + ":" + "00" + ":" + "00 ";
      var value01 =
        yy + "-" + mm + "-" + dd + " " + "23" + ":" + "59" + ":" + "59 ";
      return [value, value01];
    },
    confirm() {
      // console.log(this.form_data);
      preDealAssistSearch_card({
        id: this.id_list,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
        notice_time: this.form_data.time,
        note: this.form_data.name,
        deal_type: this.form_data.disposition,
      }).then((res) => {
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.assistSearchList_card();
          this.editShow = false;
        } else {
          this.$message({
            type: "warning",
            message: res.msg,
          });
        }
      });
    },
    GetDateStr(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m =
        dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
      var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
      // console.log(y + "-" + m + "-" + d)
      return y + "-" + m + "-" + d + " " + "23" + ":" + "59" + ":" + "59 ";
    },
    recordComplete(id, msg) {
      this.$confirm("确认该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          dealAssistSearch_card({
            id,
            pid:
              localStorage.getItem("id") ||
              this.$store.state.cardConfig.sort_id,
          }).then((res) => {
            console.log(res);
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.assistSearchList_card();
            } else {
              this.$message({
                type: "warning",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    overdueTime(item, type) {
      if (type == 0) {
        const nowStamps = new Date().getTime();
        const addStamps = new Date(item.add_time).getTime();
        let stamps = (nowStamps - addStamps) / (3600 * 24 * 1000);
        return stamps.toFixed(1);
      } else {
        const addStamps = new Date(item.add_time).getTime();
        const actionStamps = new Date(item.action_time).getTime();
        let stamps = (actionStamps - addStamps) / (3600 * 24 * 1000);
        return stamps.toFixed(1);
      }
    },
    assistSearchList_card() {
      this.listLoading = true;
      assistSearchList_card({
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        this.list = res.data.list;
        this.listLoading = false;
      });
    },
    //旧接口
    time02() {
      if (this.value7) {
        this.$store.commit("serchTime_card", this.value7);
      } else {
        this.$store.commit("serchTime_card", ["", ""]);
      }
    },
    //隔行类名
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>
<style lang='less' scoped>
/deep/.el-table td {
  padding: 6px 0px;
}
.head02 {
  margin-top: 5px;
  /deep/.el-form-item {
    margin-bottom: 0;
  }
  .el-form /deep/.el-input__inner {
    padding: 0 5px;
  }
  .el-form .el-input {
    font-size: 12px;
  }
  .el-form .one .el-input {
    width: 90px;
  }
  .el-form .two .el-input {
    width: 90px;
  }
  .el-form .three /deep/.el-input__inner {
    width: 250px;
  }
  .el-form .four /deep/.el-input__inner {
    width: 100px;
  }
  .el-button {
    margin-left: 3px;
  }
}
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.addserve {
  /deep/.el-input {
    width: 80%;
    text-align: center;
    font-weight: bold;
    color: red;
  }
}

.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.outtime {
  color: #f56c6c;
}
.nav {
  /deep/.el-tabs__content {
    display: none;
  }
  /deep/.el-tabs__header {
    margin-bottom: 0;
  }
  /deep/.el-tabs__nav-scroll {
    padding-left: 10px;
  }
  margin-bottom: 8px;
}
/deep/.el-table .red_ip {
  color: #f56c6c !important;
}
.tables {
  background-color: pink;
  height: 80%;
}

.app-container {
  padding-left: 10px;
  padding-top: 0px;
  .content {
    .right {
      box-sizing: border-box;
      //   width: 45%;
      .center {
        display: flex;
        justify-content: space-between;
        .left,
        .right {
          box-sizing: border-box;
          width: 49%;
          //   height: 600px;
          padding: 5px;
          /deep/.el-input__inner {
            line-height: 27px;
            height: 27px;
          }
        }
      }
    }
  }
}
.dialog_edit {
  /deep/.el-input {
    width: 150px;
    margin-right: 10px;
  }
  /deep/.el-input__inner {
    width: 150px;
  }
}
/deep/.el-table {
  color: #000;
}
/deep/.el-dialog__body p {
  text-align: center;
}
</style>